<template>
    <div style="padding: 16px; display: flex; justify-content: space-between; flex-direction: column; height: 100vh; box-sizing: border-box;">
      <div>
        <div @click="fh" style="font-size: 20px;">&lt;</div>
        <div style="margin: 20px auto 50px; width: 90%;">
          <div style="font-size: 25px;">注册</div>
          <!-- <div style="color: #999; font-size: 14px;">未注册过的手机号码将自动创建账号</div> -->
        </div>
        <div>
          <div style="width: 90%; margin: auto; padding: 15px 10px; border-bottom: 1px solid #eee;">
            <input maxlength="11" placeholder="请输入账号" v-model="phonenum" style="outline: none; padding: 3px; width: 100%; border: 0;" />
          </div>
          <div style="width: 90%; margin: auto; padding: 15px 10px; border-bottom: 1px solid #eee; display: flex;align-items: center;">
            <input type="password" placeholder="请输入密码" ref="elementRef" v-model="password" style="outline: none; padding: 3px; flex-grow: 1; border: 0;" />
            <!-- <div @click="test" style="border: 1px solid #ddd; padding: 3px 20px;font-size: 14px; border-radius: 5px; color: #333;">获取验证码</div> -->
          </div>
        </div>
        <!-- <div style="text-align: right; width: 90%; margin: 10px auto 0; font-size: 12px;"><span>忘记密码？</span></div> -->
        <div @click="register" style="width: 90%; text-align: center; padding: 10px; margin: 30px auto; background-color: rgb(245, 124, 0); color: #eee; border-radius: 5px;">注册</div>
      </div>
      <div>
        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
          <input type="checkbox" />
          <span style="font-size: 12px; color: #999;">
            <span>我已阅读并同意</span>
            <span> 服务协议 </span>
            <span>和</span>
            <span> 隐私政策</span>
          </span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from '../../axios'
  import { onBeforeUpdate, ref } from 'vue'
  import { useRouter } from 'vue-router'
  let router = useRouter()
  let phonenum = ref('')
  let password = ref('')
  const elementRef = ref<HTMLElement | null>(null)

  let fh = () => {
    router.go(-1)
  }
  let register = () => {
        console.log(phonenum, password)
      axios.post('/register', {phonenum: phonenum.value, password: password.value}).then(i => {
        if(i.data.code === 200){
            router.push('/login')
        }
      })
    }
    onBeforeUpdate(() => {
        if(phonenum.value.length===11){
            elementRef.value.focus()
        }
    })
  </script>
  
  <style>
  
  </style>